<template>
    <div class="stat">
        <div class="box" v-for="i in data">
            <div class="title">{{i.title}}</div>
            <div class="list">
                <div class="item" v-for="j in i.list">
                    <div class="num">{{j.num}}</div>
                    <div class="name">{{j.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import {reactive} from 'vue'

const data = reactive([
    {
        title: '商家数据',
        list: [
            {name: '新创建', num: 13},
            {name: '新认证', num: 13},
            {name: '封店数量', num: 13},
            {name: '关店数量', num: 13},
        ]
    },
    {
        title: '审核数据',
        list: [
            {name: '商家', num: 13},
            {name: '商品', num: 13},
            {name: '实名', num: 13},
            {name: '评论', num: 13},
        ]
    }
])

</script>

<style lang="scss" scoped>
.stat{
    display: flex;
    margin: 1.25rem 0;

    .box{
        flex: 1;
        background: #fff;
        height: 12.375rem;
        border-radius: 10px;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.1);
        &:nth-child(1){
            margin-right: 1.25rem;

        }
        .title{
            margin-bottom: 1.25rem;
        }
        .list{
            width: 100%;
            flex: 1;
            background: #EDF5F2;
            border-radius: 0.625rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            //padding: 1.875rem 0;
            .item{
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                color: #333333;
                .num{
                    font-weight: 500;
                    font-size: 1.75rem;
                }
                .name{
                    font-weight: 400;
                    font-size: 0.875rem;
                }

            }
        }
    }
}

</style>
